<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script src="../../static/layuiadmin/layui/vue.min.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../../static/layuiadmin/layui/css/layui.css"
              ppabs="https://www.layui.site/layui/dist/css/layui.css" media="all">

        <script src="../../static/layuiadmin/layui/layui.js" charset="utf-8"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    </head>
    <body>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <!--    <legend>仅节点左侧图标控制收缩</legend>-->
        </fieldset>

        <div id="test" class="demo-tree"></div>

        <script>
            layui.use(["tree", 'util'], function () {
                var tree = layui.tree;
                var data1 = [];

                $.ajax({
                    type: "POST",
                    url: "/ams-admin/ams/menu/JsonTree",
                    contentType: "application/json",
                    success: function (r) {
                        data1 = r
                        //仅节点左侧图标控制收缩
                        tree.render({
                            elem: '#test'
                            , data: data1
                            , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                            , click: function (obj) {
                                var parent$ = window.parent.layui.jquery;
                                parent$("#name").val(obj.data.label);
                                parent$("#menuPid").val(obj.data.id);
                            }
                        });
                    }
                });
            });
        </script>

    </body>
</html>